<template>
	<!-- 补发/入库记录明细 -->
	<a-modal :title="dialogType == 'reissue' ? '补发明细' : '入库明细'" :width="1400" :visible="visible"
		:confirmLoading="confirmLoading" :footer="null" @cancel="handleCancel">
		<a-spin :spinning="formLoading">
			<a-form :form="form">
				<div v-if="dialogType == 'reissue'">
					<a-form-item label="补发编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['number']" />
					</a-form-item>
					<a-form-item label="补发时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['createTime']" />
					</a-form-item>
					<a-form-item label="操作人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['createUserName']" />
					</a-form-item>
				</div>
				<div v-else>
					<a-form-item label="入库编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['orderNumber']" />
					</a-form-item>
					<a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['createTime']" />
					</a-form-item>
					<a-form-item label="操作人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
						<a-input placeholder="" style="width: 70%;" disabled v-decorator="['createUserName']" />
					</a-form-item>
				</div>
			</a-form>
			<s-table ref="table" style="margin-top: 15px;" size="default"
				:columns="dialogType == 'reissue' ? columns : columns1" :data="loadData" :alert="true">
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.material.imageUrl" />
				</span>
				<span slot="image1" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.emsMaterialResult.imageUrl" />
				</span>
			</s-table>
		</a-spin>
	</a-modal>
</template>

<script>
import { STable } from '@/components'

import { emsDefectivePoolReissueMaterial } from '@/api/modular/main/badPool'

import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'

import { getUrlParam } from '@/utils/util'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'

export default {
	components: {
		STable
	},
	props: ['materialType'],
	data() {
		return {
			dialogType: '',
			labelCol: {
				xs: { span: 2 },
				sm: { span: 2 }
			},
			wrapperCol: {
				xs: { span: 22 },
				sm: { span: 22 }
			},
			orgTree: [],
			visible: false,
			confirmLoading: false,
			formLoading: false,
			form: this.$form.createForm(this),
			route_path: '',
			columns: [
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '料号',
					dataIndex: 'emsMaterialResult.materialCode'
				},
				{
					title: '名称',
					dataIndex: 'emsMaterialResult.materialName'
				},
				{
					title: '规格',
					width: '220px',
					dataIndex: 'emsMaterialResult.materialModelNumber'
				},
				{
					title: '采购价',
					width: '120px',
					dataIndex: 'emsMaterialResult.purchasePrice'
				},
				{
					title: '图片',
					scopedSlots: { customRender: 'image1' },
				},
				{
					title: '不良数量',
					dataIndex: 'defectiveNum'
				},
				{
					title: '补发数量',
					dataIndex: 'num'
				},
			],
			columns1: [
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '料号',
					dataIndex: 'material.materialCode'
				},
				{
					title: '名称',
					dataIndex: 'material.materialName'
				},
				{
					title: '规格',
					dataIndex: 'material.materialModelNumber',
				},
				{
					title: '采购价',
					width: '120px',
					dataIndex: 'material.purchasePrice'
				},
				{
					title: '图片',
					scopedSlots: { customRender: 'image' },
				},
				{
					title: '不良数量',
					dataIndex: 'defectiveNum'
				},
				{
					title: '入库数量',
					dataIndex: 'number'
				},
			],
			queryParams: {},
			defectivePoolReissueRecordId: null,
			loadData: parameter => {
				if (this.dialogType == "reissue") {//补发明细
					let query = {
						...parameter,
						...this.queryParams
					}
					return emsDefectivePoolReissueMaterial(query).then((res) => {
						return res.data
					})
				} else {
					let query = {
						...parameter,
						...this.queryParams
					}
					return page(query).then((res) => {
						return res.data
					})
				}
			},
		}
	},
	created() {
		this.route_path = getUrlParam(this.$route.path).materialType
		console.log("route_path", this.route_path);
	},
	methods: {
		// 初始化方法
		init(dialogType, record) {
			this.dialogType = dialogType
			this.visible = true;
			if (!this.managerOrFinance()) {
				this.columns.splice(4, 1);
				this.columns1.splice(4, 1);
			}
			if (this.dialogType == "reissue") {
				this.queryParams.defectivePoolReissueRecordId = record.id;
			} else {
				this.queryParams.orderId = record.orderId
			}
			console.log("@-record", record);

			setTimeout(() => {
				this.form.setFieldsValue({
					...record
				})
				this.$refs.table.refresh();
			}, 500);
		},
		handleSubmit() {
			let text = this.dialogType == 'edit' ? '编辑' : '新增'
			const { form: { validateFields } } = this
			validateFields((errors, values) => {
				if (!errors) {
					add({ ...values, materialType: this.materialType }).then((res) => {
						if (res.success) {
							this.$message.success(`${text}成功`)
							this.visible = false
							this.confirmLoading = false
							this.$emit('ok', values)
							this.form.resetFields()
							this.fileList = []
							this.selectedObj = {}
						} else {
							this.$message.error(`${text}失败` + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.visible = false
		},
	}
}
</script>

<style>
.inputDiv {
	width: 100%;
	line-height: 32px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #bbb;
	padding-left: 10px;
}
</style>
